<template>
  <div class="index">
    <!-- 轮播图 -->
    <div class="lunbotu">
      <mt-swipe :auto="4000" :showIndicators="false" ref="swipe" @change="indexChange">
        <mt-swipe-item v-for="(item,index) in lunboImg" :key="index" >
          <img :src="item.image" alt="" @click="toGoodDesc(item.tag2)">
        </mt-swipe-item>
      </mt-swipe>
      <div class="content_index flex">
        <div class="category">{{ activeTag }}</div>
        <div class="feature">{{ activeTitle }}</div>
        <ul class="indicators">
          <li v-for="(item, index) in lunboImg" :key="index" :class="{active : index == activeIndex }"></li>
        </ul>
      </div>
    </div>
    <!-- 产品列表 -->
    <div class="good_list">
      <p class="list_title fff">当期众筹</p>
      <div class="good_item fff" v-for="(item,index) in goodList" :key="index" @click="toGoodDesc(item.id)">
        <img :src="item.image" alt="">
        <div class="text_info">
          <p class="item_title">{{ item.name }}</p>
          <div class="item_feature flex">
            <span>{{ item.feature }}</span>
            <span>{{ item.buy_number }}人已支持</span>
          </div>
          <!-- 进度条 -->
          <div class="project_progress_wrap fff">
            <div class="project_progress">
              <div class="ppContent" :style="{ width: item.percent > 100 ? 100 + '%' : item.percent + '%' }"></div>
            </div>
            <!-- 进度条指示标 -->
            <div class="plan" :style="{left: item.percent > 92 ? 92 + '%' :(item.percent - 1)+ '%' }"><span>{{ parseInt(item.buy_price / item.price * 100)}}%</span></div>
          </div>
          <!-- 项目数据 -->
          <div class="projectData fff">
            <!-- 目标金额 -->
            <div class="target_amount">
              <span class="dataItem">{{ parseInt(item.price) }}元</span>
              <span>目标金额</span>
            </div>
            <!-- 认筹金额 -->
            <div class="sell_amount">
              <span class="dataItem">{{ parseInt(item.buy_price) }}元</span>
              <span>认筹金额</span>
            </div>
            <!-- 距认筹结束 -->
            <div class="dis_end">
              <span class="dataItem" ref="end" v-show="item.day>0">{{ item.day }}天{{ item.hour }}小时</span>
              <span class="dataItem" v-show="item.day<=0">活动已结束</span>
              <span>距认筹结束</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <a :href="'tel:'+ kefu_tel" class="contactService iconfont icon-kefuxiaoguniang">
      联系客服
    </a> -->
    <div class="copyright">
      <p>备案号：闽ICP备17029405号</p>
      <p>Copyright ©2017 chamiw.com</p>
    </div>
    <shade v-show="loadShow"/>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import login from "@/utils/login";
import getCode from "@/utils/getCode";
import getUrlParams from "@/utils/getUrlParams.js";
import {
  getZcGoodList,
  getLunBoImg,
  countView,
  wxCodeLogin,
  getSign,
  getGood
} from "@/api/index";
export default {
  data() {
    return {
      loadShow: true,
      lunboImg: [],
      goodList: [],
      activeTag: "",
      activeTitle: "",
      activeIndex: 0,
      urlParams: {
        good_id: "",
        username: "",
        ad: "",
        platform: ""
      },
      kefu_tel: this.$store.state.kefu_tel,
      code: "",
      title: '',
      description: '',
      imgUrl: ''
    };
  },
  created() {
    console.log(this.$store.state.car_da)
    getUrlParams(this);
    getGood(this.urlParams.good_id).then(result => {
      this.title = result.data.name;
      this.description = result.data.feature;
      this.imgUrl = result.data.image
      this.$store.commit("SETPAGEINFO", {
        title: result.data.name,
        description: result.data.feature
      });
    })
    login(this);
    getCode(this);
    // if(!this.code) {
    //   return false;
    // }
    wxCodeLogin(this.code).then(result => {
      // if (result.data.success == "yes") {
      //   this.loadShow = false;
      // }
    });
    getSign(location.href.split("#")[0]).then(res => {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名
        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
      });
      wx.ready(() => {
        wx.onMenuShareTimeline({
          title: this.title, // 分享标题
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.imgUrl, // 分享图标
          success: function() {
            // 用户点击了分享后执行的回调函数
            // mui.alert("分享朋友圈成功");
          }
        });
        wx.onMenuShareAppMessage({
          title: this.title, // 分享标题
          desc: this.description, // 分享描述
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.imgUrl, // 分享图标
          type: "", // 分享类型,music、video或link，不填默认为link
          dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {
            // 用户点击了分享后执行的回调函数
            // mui.alert("分享给好友成功");
          }
        });
      });
      wx.error(function(res) {
        // alert(res);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    });
    this.$store.commit("SETURLPARAMS", this.urlParams);
    const now = new Date().getTime();
    getLunBoImg("ZC_INDEX_TOP").then(result => {
      this.lunboImg = result.data;
      this.activeTag = this.lunboImg[0].tag1;
      this.activeTitle = this.lunboImg[0].title;
    });
    getZcGoodList(0).then(result => {
      this.goodList = result.data.list;
      this.goodList.forEach(item => {
        item.percent = item.buy_price / item.price * 100 > 100 ? 100 : item.buy_price / item.price * 100;
        // item.day
        const endDate = new Date(item.end_time.replace(/-/g, "/")).getTime();
        var residue = (endDate - now) / 1000;
        item.day = Math.floor(residue / 3600 / 24) + "";
        item.hour = Math.floor((residue / 3600) % 24) + "";
      });
      this.loadShow = false;
    });
    var view = this.urlParams;
    view.page_url = location.href;
    view.pid = this.urlParams.good_id;
    countView(view).then(result => {
      this.$store.commit("SETKEFUTEL", result.data.service_tel);
      this.kefu_tel = result.data.service_tel
    });
    // setTimeout(() => {

    // }, 10)
  },
  methods: {
    indexChange() {
      this.activeIndex = this.$refs.swipe.index;
      this.activeTag = this.lunboImg[this.$refs.swipe.index].tag1;
      this.activeTitle = this.lunboImg[this.$refs.swipe.index].title;
    },
    toGoodDesc(id) {
      this.$router.push("/projectItem?good_id=" + id + '&username=' + this.$store.state.urlParams.username + '&platform=' + this.$store.state.urlParams.platform);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
@import "@/style/mintui.scss";
.index {
  font-size: to(24);
  // padding-bottom: to(71);
  .lunbotu {
    position: relative;
    .mint-swipe {
      height: to(320);
      .mint-swipe-item {
        background-color: #000;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .is-active {
        background-color: pink;
      }
    }
    .content_index {
      height: to(43);
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      color: white;
      .category {
        flex: 2;
        background-color: rgba(95, 13, 13, 1);
        text-align: center;
        line-height: to(43);
      }
      .feature {
        flex: 9;
        line-height: to(43);
        padding-left: to(18);
      }
      ul {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        // transform: scale(.25);
        li {
          width: to(20);
          height: to(20);
          background-color: #fff;
          float: left;
          border-radius: 50%;
          // margin: 0 to(8);
          transform: scale(0.5);
          &.active {
            background-color: #5f0d0d;
          }
        }
      }
    }
  }
  .good_list {
    .list_title {
      margin: to(18) 0;
      height: to(60);
      line-height: to(60);
      padding-left: to(40);
      position: relative;
      font-size: to(26);
      color: #333;
      background-color: #ddd;
      &::after {
        content: " ";
        width: to(4);
        height: to(24);
        background-color: #6f4e00;
        position: absolute;
        left: to(15);
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .good_item {
      background-color: #fff;
      margin-bottom: to(13);
      padding: 0 to(15);
      img {
        width: 100%;
        height: to(305);
        display: block;
      }
      .item_title {
        color: #720000;
        font-size: to(28);
        line-height: to(50);
        margin-top: to(15);
      }
      .item_feature {
        font-size: to(22);
        line-height: to(50);
        justify-content: space-between;
        span {
          &:nth-child(1) {
            color: #444;
            flex: 8;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          &:nth-child(2) {
            flex: 2;
            color: #b20101;
            text-align: right;
          }
        }
      }
      .project_progress_wrap {
        width: 100%;
        padding: to(20) to(0) to(40);
        box-sizing: border-box;
        position: relative;
        .plan {
          position: absolute;
          width: to(60);
          line-height: to(38);
          height: to(38);
          border: 1px solid #ff7878;
          background-color: #fff;
          /*color: #df4d4d;*/
          color: #df4d4d;
          top: to(8);
          right: 0;
          font-size: to(60);
          border-radius: to(10);
          // &:after {
          //   box-sizing: border-box;
          //   content: "  ";
          //   position: absolute;
          //   left: 0;
          //   top: 0;
          //   z-index: 1;
          //   width: 200%;
          //   height: 200%;
          //   border: 1px solid #ff4f4f;
          //   -webkit-transform-origin: 0 0;
          //   transform-origin: 0 0;
          //   -webkit-transform: scale(0.5, 0.5);
          //   transform: scale(0.5, 0.5);
          //   border-radius: to(50);
          // }
          span {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            font-size: to(18);
            line-height: to(38);
            color: #df4d4d;
            text-align: center;
          }
          // }
        }
        .project_progress {
          width: 100%;
          height: to(14);
          /*background-color: #d9d9d9;*/
          background-color: #d9d9d9;
          // border: to(2) solid #c63d3d;
          border-radius: to(5);
          box-sizing: border-box;
          div {
            transition: all 3.9s;
            width: 0%;
            height: 100%;
            background-color: #ff7878;
            border-radius: to(5) 0 0 to(5);
          }
        }
      }
      .projectData {
        display: flex;
        div {
          flex: 1;
          height: to(100);
          span {
            font-size: to(22);
            display: block;
            text-align: center;
            color: #888;
            line-height: to(40);
            &.dataItem {
              font-size: to(28);
              color: #000;
            }
          }
        }
      }
    }
  }
  .contactService {
    background-color: #ff7878;
    height: to(71);
    text-align: center;
    font-size: to(26);
    line-height: to(71);
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    opacity: 0.9;
    text-decoration: none;
    &.icon-kefuxiaoguniang {
      &:before {
        font-size: to(35);
        vertical-align: middle;
      }
    }
  }
  .copyright {
    margin-top: to(15);
    padding: to(8) 0;
    background-color: #fff;
    p {
      text-align: center;
      color: #666;
      font-size: to(20);
      line-height: to(40);
      &:nth-child(2) {
        font-size: to(18);
        color: #999;
        line-height: to(30);
      }
    }
  }
}
</style>
